<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="header">
      <view class="title">取餐码</view>
      <view class="subtitle">请向工作人员出示此码</view>
    </view>

    <!-- 条形码区域 -->
    <view class="barcode-container">
      <view class="barcode">
        <img src="@/assets/home/food_code.svg" />
      </view>
      <view class="order-id">订单号: {{ code_data.orderId }}</view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-item">
        <view class="label">商家名称</view>
        <view class="value">{{ code_data.sellerName }}</view>
      </view>
      <view class="info-item">
        <view class="label">餐品名称</view>
        <view class="value">{{ code_data.name }}</view>
      </view>
      <view class="info-item">
        <view class="label">餐品数量</view>
        <view class="value">{{ code_data.allCount }}</view>
      </view>
      <view class="info-item">
        <view class="label">订单金额</view>
        <view class="value price">¥{{ code_data.allPrice }}</view>
      </view>
      <view class="info-item">
        <view class="label">取餐地点</view>
        <view class="value">{{ formatAddress(code_data.address) }}</view>
      </view>
      <view class="info-item">
        <view class="label">取餐时间</view>
        <view class="value">{{ formatTime(code_data.takeFoodTime) }}</view>
      </view>
      <view class="info-item" v-if="code_data.remark">
        <view class="label">备注</view>
        <view class="value remark">{{ code_data.remark }}</view>
      </view>
      <view class="info-item">
        <view class="label">订单状态</view>
        <view class="value status" :class="getStatusClass(code_data.status)">{{ code_data.status }}</view>
      </view>
    </view>

    <!-- 餐品图片 -->
    <view class="food-image">
      <image :src="code_data.icon" mode="aspectFill"></image>
    </view>

    <!-- 底部提示 -->
    <view class="footer">
      <view class="tip">请在取餐时出示此码</view>
      <view class="time">下单时间: {{ formatOrderTime(code_data.startTime) }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 接收页面参数
const code_data = ref({
  "_id": "681829e02b449642773e53e2",
  "startTime": "1746414048419",
  "status": "待出餐",
  "totalCount": "1",
  "address": "到店取餐-到店取餐",
  "takeFoodTime": "2025-05-05-06:00",
  "allCount": "1",
  "allPrice": "111.00",
  "remark": "备注444444444444444",
  "orderId": "491001009852",
  "sellerName": "一食堂一楼隆江猪脚饭",
  "sellerId": "67d540672c94bd40835a11dd",
  "price": 111,
  "name": "11",
  "icon": "http://localhost:8060/images/foodIcon/2b7de967f0865d94d4c899dbda119fb2.png",
  "dec": "1"
});

// 通过 prop接收参数
const props = defineProps({
  codeData: {
    type: String,
    default: ''
  },
});
onMounted(() => {
  // 获取URL参数
  if (props.codeData) {
    try {
      // 解码并解析JSON字符串
      const decodedData = decodeURIComponent(props.codeData);
      const parsedData = JSON.parse(decodedData);
      code_data.value = parsedData;
      console.log('成功解析数据:', code_data.value);
    } catch (error) {
      console.error('解析数据失败:', error);
    }
  }
});

// 格式化地址
const formatAddress = (address) => {
  if (!address) return '';
  return address.replace('-', ' ');
};

// 格式化取餐时间
const formatTime = (timeStr) => {
  if (!timeStr) return '';
  const [date, time] = timeStr.split('-');
  return `${date} ${time}`;
};

// 格式化下单时间
const formatOrderTime = (timestamp) => {
  if (!timestamp) return '';
  const date = new Date(Number(timestamp));
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 获取状态对应的样式类
const getStatusClass = (status) => {
  switch (status) {
    case '待出餐':
      return 'status-waiting';
    case '待取餐':
      return 'status-ready';
    case '已完成':
      return 'status-completed';
    default:
      return '';
  }
};

// 获取页面事件通道
const getOpenerEventChannel = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const eventChannel = currentPage.getOpenerEventChannel();
  return eventChannel;
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .subtitle {
    font-size: 24rpx;
    color: #666;
    margin-top: 10rpx;
  }
}

.barcode-container {
  background-color: #fff;
  padding: 40rpx;
  border-radius: 16rpx;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 30rpx;

  .barcode {
    margin-bottom: 20rpx;

  }

  .order-id {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
}

.order-info {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  width: 90%;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 30rpx;

  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 16rpx 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .label {
      color: #666;
      font-size: 26rpx;
    }

    .value {
      color: #333;
      font-size: 26rpx;
      font-weight: 500;
      max-width: 70%;
      text-align: right;

      &.price {
        color: #ff6b6b;
      }

      &.remark {
        font-size: 24rpx;
        color: #999;
      }

      &.status {
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;

        &.status-waiting {
          background-color: #fff8e6;
          color: #ffaa00;
        }

        &.status-ready {
          background-color: #e6f7ff;
          color: #1890ff;
        }

        &.status-completed {
          background-color: #e6fff0;
          color: #52c41a;
        }
      }
    }
  }
}

.food-image {
  width: 90%;
  height: 300rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  image {
    width: 100%;
    height: 100%;
  }
}

.footer {
  text-align: center;
  margin-top: 20rpx;

  .tip {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .time {
    font-size: 24rpx;
    color: #999;
  }
}
</style>